<template>
  <a-drawer
    title="查看信息"
    :width="1000"
    :visible="showLookFlag"
    :body-style="bodyStyle"
    @close="onClose">
    <a-spin :spinning='showMain'>
      <p class='big-title'>活动-{{dataSource.name}}</p>
      <p class='type-name'>基本信息</p>
      <span class='col' v-for='item in showSource'>
        <span class='title'>{{item.label}}:</span>
        <span class='content'>{{item.value}}</span>
      </span>
      <p class='type-name'>交付物</p>
      <deliverContent ref='ref_deliver_drawer' :deliverCols='deliverCols' :isLook='true'/>
    </a-spin>
    <div class="btn-content">
      <a-button :style="{ marginRight: '8px' }" @click="onClose">
        取消
      </a-button>
      <a-button type="primary" @click="onClose($event,true)">
        确定
      </a-button>
    </div>
  </a-drawer>
</template>
<script>
import { getTaskDetail } from "@api/planComponent";
import deliverContent from '@/views/singleProject/projectPlan/components/deliver'
export default {
  components: {
    deliverContent
  },
  computed: {
    bodyStyle() {
      return { padding: '0px 20px 80px 20px' }
    },
  },
  data() {
    return {
      showMain: true,
      showLookFlag: false,
      dataSource: {},
      showSource: [],
      deliverCols: [
        {
          title: "交付物要求",
          dataIndex: 'name', 
          slotType: 'showspan',
          width: 220,
          scopedSlots: {
            customRender: 'name'
          }
        },
        {
          title: "交付物",
          dataIndex: 'subjectName', 
          slotType: 'upload',
          scopedSlots: {
            customRender: 'subjectName'
          }
        },
        {
          title: "是否最新版本",
          dataIndex: 'isLatestVersion',
          width: 150,
        },
        {
          title: "交付物状态",
          dataIndex: 'subjectState',
          width: 120,
        }
      ]
    }
  },
  methods: {
    onClose(ev,submit = false) {
      this.showLookFlag = false
    },
    show(source) {
      const self = this;
      self.showLookFlag = true;
      self.showMain = true;
      self.dataSource = source
      
      self.$nextTick(() => {
        self.$refs.ref_deliver_drawer.getDetails(source)
      });
      getTaskDetail({
        oid: source.oid,
      }).then(res => {
        self.showMain = false;
        self.showSource = [];
        if (res.data.success) {
          res.data.data[0].rows.forEach(item => {
            self.showSource.push(...item.items)
          })
        }else {
          self.$message.error(res.data.message)
        }
      })
    },
  }
}
</script>
<style scoped lang="less">
.btn-content {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.big-title{
  line-height: 50px;
  font-weight: bold;
  color: #000;
  font-size: 20px;
}
.type-name {
  line-height: 40px;
  color: #000;
  font-size: 15px;
  font-weight: bold;
  clear: both;
}
.col{
  float: left;
  width: 33%;
  display: flex;
  line-height: 32px;
  .title{
    display: inline-block;
    width: 110px;
    color: #888;
  }
  .content{
    flex: 1;
    padding-right: 30px;
    color: #000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>